<template>
  <div class="homeView">
     <el-container>
  <el-header>
    <div class="logo" @click="goHome">
      <img src="@/assets/images/logo2.png" alt="">
      <div class="text">数据分析.管理系统</div>
    </div>

  <div class="upLogin">
   <el-popconfirm title="确定退出登录吗？" @confirm="outLogin">
  <el-button type="danger" slot="reference">退出登录</el-button>
</el-popconfirm>
  </div>

  </el-header>
  <el-container>
    <el-aside :width="isCollapse ? '64px' :'150px' ">

  <el-tooltip class="item" effect="dark" content="展开与折叠" placement="right">
    <div class="fold" @click="clickFold">
      <i class="el-icon-arrow-left" v-show="!isCollapse"></i>
      <i class="el-icon-arrow-right" v-show="isCollapse"></i>
    </div>
  </el-tooltip>

     <el-menu background-color="#304156"
     text-color="rgba(255,255,255,0.6)"
     active-text-color="#fff"
     :collapse = 'isCollapse'
     :collapse-transition ="collapseFalse"
     router
     :default-active="$route.path"
       >
        <el-menu-item index="/all">
        <i class="el-icon-coin"></i>
        <span slot="title">意向客户</span>
      </el-menu-item>
        <el-menu-item index="/add">
        <i class="el-icon-user"></i>
        <span slot="title">添加客户</span>
      </el-menu-item>
        <el-menu-item index="/data">
        <i class="el-icon-menu"></i>
        <span slot="title">数据分析</span>
      </el-menu-item>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>后台管理</span>
        </template>
          <el-menu-item >数据分析</el-menu-item>
         <el-menu-item  >订单详情</el-menu-item>

      </el-submenu>

     </el-menu>

    </el-aside>

    <el-main>

     <router-view></router-view>

    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>

export default {
  data () {
    return {
      isCollapse: false,
      collapseFalse: false
    }
  },

  methods: {

    goHome () {
      this.$router.push('/welcome')
    },
    // 退出登录
    outLogin () {
      window.sessionStorage.removeItem('token')
      this.$message.success('退出成功')
      this.$router.push('/login')
    },
    // 展开和折叠
    clickFold () {
      this.isCollapse = !this.isCollapse
    }
  }

}
</script>

<style lang="less" scoped>

.homeView{
  height: 100%;
}

.el-header{
  background: #17253f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;

  .logo{
    display: flex;
    align-items: center;
    img{
      display: block;
      height: 70%;
    }

    .text{
      font-size: 25px;
      color: rgba(255,255, 255, 0.68);
      padding-left: 20px;

    }
  }

}
.el-aside{
  background: #304156;
  position: relative;
  .fold{
    width: 30px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
    background:#17253f;
    color:#ccc;
    position: absolute;
    z-index: 1;
    right: 0;
    top:300px

  }
}

.el-container{
  background: #f8f8f8;
  height: 100%;
}

</style>
